<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>景点详情</title>
    <script src="js/jquery-3.7.1.min.js"></script>
    <style>
        #attractionPreview {
            margin: 20px auto;
            width: 100%;
            height: 700px;

            .right_child {
                margin-left: 1%;
                width: 37%;
                height: 700px;
                overflow: scroll;
                background-color: white;

                img {
                    float: left;
                    margin: 10px 10px;
                }

                div[class="right"] {
                    color: #ff6600;
                    line-height: 90px;
                    margin-right: 10px;

                    span {
                        font-size: 30px;
                        font-weight: bold;
                    }
                }

                #attractionDetail {
                    h4 {
                        color: #4f9c00;
                        line-height: 0;
                        margin: 20px 10px;
                    }

                    img {
                        display: block;
                        width: 90%;
                        float: left;
                    }

                    #f1e2 {
                        width: 100%;
                        height: 40px;
                        background-color: #4f9c00;
                        float: left;

                        div {
                            width: 15%;
                            height: 30px;
                            margin: 5px 10px;
                            font-weight: bold;
                            text-align: center;
                            line-height: 30px;
                            background-color: white;
                            color: #4f9c00;
                        }
                    }

                    #r2y5 {
                        margin: 0 10px;
                        float: left;

                        p {
                            line-height: 0;
                        }

                        span {
                            font-size: 13px;
                        }
                    }

                    button {
                        margin: 10px 10px;
                        width: 20%;
                        height: 30px;
                        background-color: #ff7b02;
                        color: white;
                        border-radius: 5px;
                        border-width: 0;
                    }
                }
            }

        }
    </style>
</head>

<body>
    <div id="new_header">
        <script>
            $("#new_header").load("header.html");
        </script>
    </div>

    <!-- 正文部分 -->
    <div id="main">
        <!-- 旅游景点部分 -->
        <div id="attractionPreview">
            <div id="new_left_child">
                <script>
                    $("#new_left_child").load("attraction_left_child.html");
                </script>
            </div>
            <div class="right_child common">
                <div id="attractionDetail">
                    <h4>颐和园</h4>
                    <hr>
                    <img src="imgs/bigyiheyuan.png" alt=""><br>
                    <div id="f1e2">
                        <div>景点介绍</div>
                    </div>
                    <div id="r2y5">
                        <p>景点等级：AAAAA</p>
                        <p>景点地址：北京</p>
                        <p>开放时间：9:00-17:00</p>
                        <p>门票价格：￥99</p>
                        <span>景点简介：颐和园,中国清朝对期皇家园林,前身为清西,坐落在北京西郊,距嫩区15公里,占地约290公顷,与回明回批邻。
                            它是以昆明期。万寿山为基址,以杭州西湖为蓝本,波取江南园林的设计手法而建成的一座大型山水园林,也是保存最完整的一座
                            皇家行言御苑,被普为‘皇家园林博物馆”,也是国家重点旅游果点。清朝乾榨皇帝进位以前,在北京西郊一带,建起了四座大型皇
                            家园林。屹隆十五年(1750年),屹陸皇帝为孝做其母孝圣皇后动用448万两白根在这里改建为清滑园,形成了从现清华园到香山
                            长达二十公里的皇家园林区,咸丰十年(1860年),清消园被英法联军批好。光绪十四年(1888年)重建,改称顾和园,作消夏
                            游乐地。光结二十六年(1900年),颐和园又进八国联军的破坏,珍宝被劫掠一空,清朝灭亡后,的和园在军阀混战和国民党统
                            治时期,又遭破坏。1961年3月4日,和园棱公布为第一批全国重点文物保护单位,与同时公布的承德遍导山庄,批政园,留园
                            并称为中国四大名园,1998年11月被列入《世界遗产名录》,2007年5月8日,的和园经国家旅游局正式批准为国家5A级质游景
                            区,2009年,敌和园入选中国世界纪录协会中国现存母大的皇家园林。</span>
                    </div>
                    <button onclick="subscriptAttraction()">我要预订</button>
                </div>

            </div>
        </div>
    </div>
    <script>
        //从搜索栏地址获取景点对应id
        var receiveData = decodeURI(window.location.search);
        receiveData = receiveData.substring(receiveData.indexOf("?") + 1);
        var attrId = receiveData.substring(receiveData.indexOf("=") + 1);
        $.getJSON(
            'UserServlet',
            { methodName: "getAttractionDetail", condition: attrId },
            function (result) {
                sessionStorage.clear();
                sessionStorage.setItem("productName", result.name);
                sessionStorage.setItem("price", result.price);
                $("#attractionDetail h4").empty();
                $("#attractionDetail h4").append(result.name);
                $("#attractionDetail img").attr("src", result.pictureUrl);
                var str = "A".repeat(result.rating);
                $("#r2y5").empty(); //清除所有的子元素
                $("#r2y5").append($("<p>景点等级：" + str + "</p>"));
                $("#r2y5").append($("<p>景点地址：" + result.address + "</p>"));
                $("#r2y5").append($("<p>开放时间：" + result.openingHours + "</p>"));
                $("#r2y5").append($("<p>门票价格：￥" + result.price + "</p>"));
                $("#r2y5").append($("<span>景点简介：" + result.introduce + "</span>"));
            }
        );
        //当点击预定按钮
        function subscriptAttraction() {
            console.log("预订景点");
            $.ajax({
                url: "UserServlet",
                type: "get",
                data: "methodName=addOrder&productName=" + sessionStorage.getItem("productName") + 
                "&type=旅游景点" + "&price=" + sessionStorage.getItem("price"),
                success: function (result) {
                    alert($.trim(result));
                },
                error: function () {
                    alert("出现错误，请稍后再试");
                }
            });
        }
    </script>
</body>

</html>